import React from 'react';
import styles from './style';
import { View, Text, Image, TouchableOpacity, FlatList, Dimensions } from 'react-native';
import * as Animatable from 'react-native-animatable';

const down = require('../../img/down.png');

const windowWidth = Dimensions.get('window').width;
export default class ListImg extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
        };
    }
    render() {
        let { navigation, selfStatus, list } = this.props;
        list = list || [];
        let iW = windowWidth / 2 - 30;
        const renderItem = ({ item }) => {
            const uri = { uri: item.photos[0] };
            // todo
            item.num = 0;
            return (
                <Animatable.View style={styles.imgText} animation="slideInUp">
                    <TouchableOpacity
                        onPress={() =>
                            navigation.navigate('FindDetail', { img: uri, status: selfStatus, _id: item._id })
                        }
                    >
                        <Image source={uri} style={[{ width: iW, height: iW }]} />
                    </TouchableOpacity>
                    <View style={styles.titleStyle}>
                        <Text style={styles.leftStyle}>{item.title}</Text>
                        <View style={[{ width: 50, flexDirection: 'row' }]}>
                            <Image source={down} style={styles.imgStyle} />
                            <Text style={styles.rightBottomTextStyle}>{item?.profile?.totalDown ?? 0}</Text>
                        </View>
                    </View>
                    <View style={styles.titleStyle}>
                        <Text style={[styles.leftStyle, styles.bottomStyle]} numberOfLines={1}>
                            {item.user.nickname}
                        </Text>
                    </View>
                </Animatable.View>
            );
        };
        return (
            <FlatList
                data={list}
                renderItem={renderItem}
                keyExtractor={item => item._id}
                numColumns={2}
                showsVerticalScrollIndicator={false}
                showsHorizontalScrollIndicator={false}
            />
        );
    }
}
